<style lang="scss" scoped>
.search_wrap {
  background: #fff;
  border-radius: 2px;
  margin-bottom: 10px;
}
.main_wrap {
  background: #fff;
  padding: 20px 0;
  .main_tit {
    text-align: center;
    padding: 0 0 20px;
    border-bottom: 1px solid rgb(240, 240, 240);
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
  }
  .rank_wrap {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .rank_table_wrap {
    padding: 0 10px 30px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    .rank_table_item {
      margin-right: 10px;
      flex: 1;
      display: flex;
      overflow: hidden;
      flex-direction: column;
      overflow: hidden;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>

<template>
  <div class="search_wrap">
    <Search @submit="handleSubmit" :params="rest" :showName="false" />
  </div>
  <div class="main_wrap">
    <div class="main_tit">{{ showTime }}投放数据看版</div>
    <div class="rank_wrap">
      <common-title title="ROI排行榜" />
      <filter-form :params="rest" @change="handleFilterChange"/>
    </div>
    <div class="rank_table_wrap">
      <div class="rank_table_item">
        <rank-more v-bind="showTypes" :showMore="false"/>
        <common-table 
          :columns="columns" 
          :data="pageData.data" 
          :pages="pageData.formData.pager"
          @page-change="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import FilterForm from './component/filterForm.vue'
import Search from "./component/search.vue";
import commonTitle from "@/components/commonTitle.vue";
import tableRank from "@/components/tableRank.vue";
import RankMore from "./component/rankMore.vue";
import CommonTable from '@/components/commonTable/index.vue'
import { useRoute } from 'vue-router'
import { reactive, onMounted, computed } from 'vue'
import { AnalyzePageRecords } from "@/apis/analyze";
import { getCurrentMonth, formateTime } from '@/utils/time'
import { tableColumnsMap } from './config.js'
const { query: { type, ...rest }} = useRoute()
console.log('rest: ', rest);
const columns = tableColumnsMap[type]
const typeMaps = {
  1: {
    title: '投手当日消耗排名'
  },
  2: {
    title: '投手当月消耗排名',
    color: "#29c0eb"
  },
  3: {
    title: "素材当月消耗排名",
    color: "#e1c023"
  }
}
const pageData = reactive({
  formData: {
    groupByType: "BOOK_USER",
    day: '',
    ...rest,
    pager: {
      currentPage: 1,
      pageSize: 10,
      total: 0,
    },
  },
  data: []
})
const showTime = computed(() => {
  return formateTime(pageData.formData.day, 'YYYY年MM月DD日')
})
const showTypes = typeMaps[type] || {}
const handleFilterChange = (values) => {
  Object.assign(pageData.formData, values);
  handleSearch();
};
const handleSubmit = (formData) => {
  Object.assign(pageData.formData, formData);
  pageData.formData.pager.currentPage = 1
  handleSearch();
};
const handleSearch = async () => {
  if (type == 1) { getTodayCostRank(); }
  if (type == 2) { getMonthCostRank(); }
  if (type == 3) { getUserVideoRank(); }
}
onMounted(() => handleSearch())
// 获取投手当日消耗排名
const getTodayCostRank = async () => {
  const { total, records } = await AnalyzePageRecords(pageData.formData);
  pageData.data = handleData(records || [])
  pageData.formData.pager.total = total || 0
}
// 获取投手当月消耗排名
const getMonthCostRank = async () => {
  const params = { ...pageData.formData, ...getCurrentMonth(pageData.formData.day) }
  delete params.day
  const { total, records } = await AnalyzePageRecords(params);
  pageData.data = handleData(records || [])
  pageData.formData.pager.total = total || 0
}
// 获取素材当月消耗排名
const getUserVideoRank = async () => {
  const params = { ...pageData.formData, groupByType:"USER_VIDEO", ...getCurrentMonth(pageData.formData.day) }
  delete params.day
  const { total, records } = await AnalyzePageRecords(params);
  pageData.data = handleData(records || [])
  pageData.formData.pager.total = total || 0
}
const handleData = data => {
  const { currentPage, pageSize } = pageData.formData.pager
  return (data || []).map(v => {
    return { 
      ...v,
      size: (currentPage - 1) * pageSize
    }
  })
}
const pageChange = page => {
  Object.assign(pageData.formData.pager, page)
  handleSearch()
}
</script>